<template>
  <div class="page" style="height: calc(100vh - 125px)">
    <div class="page-brand">素材库</div>
    <div class="container flex">
      <Registory
        type="element"
        @getCategory="(value) => (currentRegistory = value)"
      />
      <div class="right-container f1 g-card rel">
        <div v-if="editFile">
          <div class="flex-b align-center">
            <div class="flex align-center">
              <i
                class="el-icon-arrow-left pointer link"
                style="font-size: 18px; margin-right: 10px"
                @click="editFile = false"
              />
              <mao-checkbox
                v-if="totalVideo"
                v-model="selectAllFile"
                style="margin-right: 30px"
              >
                <span style="font-size: 14px">全选</span>
              </mao-checkbox>

              <div class="link count">素材数量：共{{ totalVideo }}个视频</div>
            </div>
            <div class="flex-e align-center">
              <el-button type="primary" size="small" @click="openAddVideoModal">
                <div class="flex-c align-center">
                  <i
                    class="el-icon-video-camera"
                    style="font-size: 14px; margin-right: 4px"
                  />
                  上传视频
                </div>
              </el-button>
              <el-button
                v-if="videoList.length"
                style="margin-left: 10px"
                type="danger"
                size="small"
                @click="batchDel"
              >
                <div class="flex-c align-center">
                  <i
                    class="el-icon-delete"
                    style="font-size: 14px; margin-right: 4px"
                  />
                  删除素材
                </div>
              </el-button>
            </div>
          </div>
          <div class="video-list flex flex-wrap align-center">
            <video-item
              v-for="(item, index) in videoList"
              :key="item.materialName"
              :item="item"
              :select-all-file="selectAllFile"
              :index="index"
              style="margin-right: 30px; margin-top: 15px"
              @refresh="getList"
            />
          </div>
          <div class="pagination-box">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="vpageParam.pageSize"
              :total="vpageParam.total"
              hide-on-single-page
              @current-change="getList"
            />
          </div>
        </div>
        <div v-else>
          <el-button
            v-if="currentRegistory.id != 0"
            type="primary"
            size="small"
            @click="openAddDirModal"
          >
            <i class="el-icon-folder-add" style="margin-right: 5px" />新建文件夹
          </el-button>

          <div class="card-name">{{ currentRegistory.libraryName }}</div>
          <div class="card-sub">共{{ pageParam.total }}个文件夹</div>
          <div class="dir-list">
            <div
              v-for="(item, index) in dirList"
              :key="item.libraryName"
              style="margin-top: 15px"
            >
              <dir-item
                :item="item"
                :index="index"
                :registory="currentRegistory"
                :checkable="false"
                @open="openDir"
                @refresh="eGetCategoryList()"
                @toggle="toggleDirCheck(index)"
              />
            </div>
          </div>
          <div class="pagination-box">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageParam.pageSize"
              :total="pageParam.total"
              hide-on-single-page
              @current-change="eGetCategoryList"
            />
          </div>
        </div>
      </div>
    </div>

    <AddVideoModal
      v-if="currentDir && currentDir.id"
      ref="addVideoModal"
      :category-id="currentDir.id.toString()"
      @get="getList"
      @refresh="getList"
    />
    <AddDirModal
      ref="addDirModal"
      :registory="currentRegistory"
      @refresh="eGetCategoryList()"
    />
    <DelFileModal ref="delFileModal" />
  </div>
</template>

<script>
import AddVideoModal from './components/AddVideoModal.vue'
import AddDirModal from './components/AddDirModal.vue'
import DelFileModal from './components/DelFileModal.vue'
import VideoItem from './components/VideoItem.vue'
import DirItem from './components/DirItem.vue'
import Registory from '../components/Registory.vue'
import { eGetCategoryList, getList } from '@/api/element'
import MaoCheckbox from '@/components/MaoCheckbox'
export default {
  name: 'Dashboard',
  components: {
    Registory,
    AddVideoModal,
    VideoItem,
    AddDirModal,
    DirItem,
    DelFileModal,
    MaoCheckbox
  },
  data() {
    return {
      videoList: [],
      dirList: [],
      activeRegistory: 0,
      autoDel: true,
      progress: '10%',
      editFile: false,
      selectAllFile: false,
      activeDir: -1,
      currentRegistory: {},
      totalVideo: 0,
      pageParam: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      vpageParam: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    currentDir() {
      if (this.activeDir === -1) {
        return {}
      }
      return this.dirList[this.activeDir] || {}
    }
  },
  watch: {
    currentRegistory: {
      handler() {
        if (this.currentRegistory.id) {
          this.eGetCategoryList()
        }
      },
      deep: true
    },
    currentDir: {
      handler() {
        if (this.currentDir.id) {
          this.getList()
        }
      },
      deep: true
    }
  },
  mounted() {
    console.log('【current-page】element-index')
  },
  methods: {
    toggleDirCheck(index) {
      const item = this.dirList[index]
      item.active = !item.active
      this.$set(this.dirList, index, item)
    },
    async eGetCategoryList(pageNo = 1) {
      this.editFile = false
      this.pageParam.pageNo = pageNo
      const res = await eGetCategoryList({
        materialLibraryId: this.currentRegistory.id,
        pageNo: this.pageParam.pageNo,
        pageSize: this.pageParam.pageSize
      })
      if (res.success) {
        this.pageParam.total = res.result.total
        this.dirList = res.result.records.map((item) => {
          item.active = false
          return item
        })
        this.$forceUpdate()
      } else {
        this.$message.error(res.message)
      }
    },
    async getList(pageNo = 1) {
      this.vpageParam.pageNo = pageNo
      const res = await getList({
        materialCategoryId: this.currentDir.id,
        materialType: 'video',
        pageNo: this.vpageParam.pageNo,
        pageSize: this.vpageParam.pageSize
      })
      if (res.success) {
        this.videoList = res.result.records
        this.vpageParam.total = res.result.total
      } else {
        this.$message.error(res.message)
      }
    },
    batchDel() {
      if (!this.selectAllFile) {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        })
        return
      }
      this.$refs.delFileModal.open()
    },
    openDir(current) {
      const index = this.dirList.findIndex(
        (item) => item.name === current.name
      )
      this.activeDir = index
      this.editFile = true
      this.getList()
    },
    openAddVideoModal() {
      this.$refs.addVideoModal.open()
    },
    openAddDirModal() {
      this.$refs.addDirModal.open()
    },
    addDirList(obj) {
      if (!obj.active) {
        obj.active = false
      }
      this.dirList.push(obj)
    },
    addVideoList(list = []) {
      this.videoList = [...this.videoList, ...list]
    }
  }
}
</script>
<style lang="scss" scoped>
.card-name {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0rem;
  margin-top: 20px;
}
.card-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 0.94);
  margin-top: 16px;
}
.dialog-title {
  font-size: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
  margin-left: 12px;
}
.dialog-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-video-list {
  .video-item {
    .img {
      width: 70px;
      height: 70px;
      border-radius: 15px;
    }
  }
}
.uplod-box {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 5px;
  border: 0.5px dashed rgba(128, 128, 128, 1);
  margin-right: 0.12rem;
  margin-bottom: 0.12rem;
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  .upload {
    width: 0.28rem;
    margin-bottom: 0.06rem;
  }
}

.mb {
  margin-bottom: 15px;
}
.container {
  .right-container {
    .count {
      font-size: 14px;
    }
  }
}
.dir-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 30px;
}
</style>
